<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据屏幕宽度自动设置网页背景和导航栏</title>
<link href="css/home2012.css" type="text/css" rel="stylesheet" />
<style>

.narrow_page {
	background: #9cf;
}

#hd {
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}

#hd .nav_top {
	background: url(images/home_bg_121204.png)
}
#hd .nav_top {
	background-position: left -221px; height: 36px
}
#hd .nav_top ul {
	margin: 0px auto; line-height: 36px; height: 36px
}
#hd .nav_top ul {
	padding-left: 40px;
}
#hd .nav_top ul li {
	float: left; white-space: nowrap; position: relative; height: 36px
}
#hd .nav_top ul a {
	display: inline-block;
	font-size: 14px;
	color: #fff;
	font-family: 'microsoft yahei','simhei';
	padding: 0px 12px 0px 13px;
}
#hd .nav_top ul a:hover {
	background: url(images/home_bg_121204.png)
}
#hd .nav_top ul a:hover {
	background-position: center -311px;
	background-color: #e00c00;
	text-decoration: none;
}
#hd .nav_top ul .on a {
	background: url(images/home_bg_121204.png)
}
#hd .nav_top ul .on a {
	background-position: center -311px;
	background-color: #e00c00;
	text-decoration: none;
}
</style>

</head>

<body>
<script language="javascript">
  var minsize=1210;
  var screensize=screen.width;
  if (screensize<minsize){document.body.style.background="#abe4ff";}
  else {document.body.style.background="#84af53";}
</script>

<script type="text/javascript">
function is_narrow(){
    var datanav="";
	var nav='<a name="nav1" href="http://www.dangdang.com">首页</a></li><li ><a name="nav1" href="">图书</a></li><li ><a name="nav1" href="">音像</a></li><li ><a name="nav1" href="">服装</a></li><li ><a name="nav1" href="">鞋靴</a></li><li ><a name="nav1" href="">箱包</a></li><li ><a name="nav1" href="">美妆</a></li><li ><a name="nav1" href="">珠宝</a></li><li ><a name="nav1" href=">家居</a></li><li ><a name="nav1" href="">食品</a></li><li ><a name="nav1" href=">酒</a></li><li ><a name="nav1" href="">手机</a></li><li ><a name="nav1" href="">数码</a></li><li ><a name="nav1" href="">电脑</a></li><li ><a name="nav1" href="">家电</a></li>';
    if(screen.width < 1210){
       datanav='<li class="on">'+nav;
    }else{
    datanav='<li class="on">'+nav+'<li ><a name="nav1" href="">孕</a></li><li ><a name="nav1" href="">婴</a></li><li ><a name="nav1" href="">童</a></li><li ><a name="nav1" href="">饰品</a></li><li ><a name="nav1" href="">手表</a></li><li ><a name="nav1" href="">家具</a></li<li ><a name="nav1" href="">保健</a></li><li ><a name="nav1" href="">运动</a><span class="icon_n"><img src="images/icon_new_2.png" alt="" /></span></li>';
    }
    return datanav;
}
</script>
<div id="hd">
  <div class="nav_top">
    <ul>
      <script>document.write(is_narrow());</script>
    </ul>
  </div>
</div>
<script language="javascript">
 if(screen.width < 1210)
   document.getElementById("hd").style.cssText = "width:960px;";
 else
   document.getElementById("hd").style.cssText = "width:1160px;";
</script>
</body>
</html>
